InnovationLab/public/[Eric]photoHelper/js/faceFusionAPI.js

/**
 *
 * @authors Eric Hsiao
 *
 */

faceFusionAPI = function () {

  //private menbers
  // var API__DOMAIN = 'https://ncxpre.cecmartech.com/'
  const API__DOMAIN = (window.location.host === 'www.pxfreshdelivery.tw') ? 'https://www.pxfreshdelivery.tw/' : 'https://demo.pxfreshdelivery.tw/';
  
  var templateData;
  var photoData;
  var faceFusionAlpha = 0.49;

  var callback = function () { };

  //private methods
  function init() {
    console.log('faceFusion is loaded.');
  }

  function start(_templateURL, _photoData, _faceFusionAlpha, _callback) {
    photoData = _photoData;
    faceFusionAlpha = _faceFusionAlpha;
    callback = _callback;
    // templateData = getBase64Image(_templateURL);

    templateData = _templateURL;
    console.log('faceFusionAPI 啟動');
    $('.faceFusion__start').hide();
    faceFusion();
  }

  function faceFusion() {

    var templateData_BASE64 = templateData.replace(/^data:image\/\w+;base64,/, "");//去掉base64標頭
    var photoData_BASE64 = photoData.replace(/^data:image\/\w+;base64,/, "");//去掉base64標頭
    console.log('faceFusionAPI 發送中...');
    $('.msg').text('faceFusionAPI 發送中...');

    $.ajax({
      type: "POST",
      url: `${API__DOMAIN}web/faceMerge`,
      data: {
        "version": "4.0",
        "alpha": faceFusionAlpha,
        "image_template": {
          "image": templateData_BASE64,
          "image_type": "BASE64"
        },
        "image_target": {
          "image": photoData_BASE64,
          "image_type": "BASE64"
        }
      },
      dataType: "json",
      success: function (response) {
        console.log(response);

        if (response.error_msg == 'SUCCESS') {
          var _merge_image = 'data:image/png;base64,' + response.result.merge_image;
          // $('.faceFusion').attr('src', _merge_image);
          callback(_merge_image);
          $('.msg').text('合成成功。');
          $('.faceFusion__start').show();
        } else {
          // console.log('faceFusionAPI 失敗重送');
          // setTimeout(function () {
          //   faceFusion();
          // }, 1000);
          $('.msg').text('圖片下載失敗，請重新送出。');
          alert('圖片下載失敗，請重新送出。');
          $('.faceFusion__start').show();
        }

      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        console.log("Status: " + textStatus + ", Error: " + errorThrown);
      }
    });
  }

  //constructor
  function getBase64Image(imgURL, width, height) { // width、height調用時傳入具體像素值，控制大小 ,不傳則默認圖像大小

    var img = new Image();
    img.onload = function () {
      var canvas = document.createElement("canvas");
      canvas.width = width ? width : img.width;
      canvas.height = height ? height : img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      var dataURL = canvas.toDataURL("image/jpeg");
      templateData = dataURL;
      // console.log('dataURL', dataURL);

      console.log('faceFusionAPI 啟動');
      faceFusion();
    };
    img.src = imgURL;
  }

  {
    $(document).ready(function () {
      init();
    });
  }

  //public

  return {
    start: function (_templateURL, _photoData, _faceFusionAlpha, _callback) {
      start(_templateURL, _photoData, _faceFusionAlpha, _callback);
    }
  };
};

var faceFusionAPI = new faceFusionAPI();